<template>
  <div>
    <div id="box">
      <el-main><h3>基本信息</h3></el-main>
      <div class="box">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="单位名称" prop="companyName">
            <el-input
              v-model="ruleForm.companyName"
              autocomplete="off"
            ></el-input> </el-form-item
          ><br />

          <el-form-item label="单位性质" prop="nature">
            <el-input
              v-model="ruleForm.nature"
              autocomplete="off"
            ></el-input> </el-form-item
          ><br />

          <el-form-item label="单位级别" prop="level">
            <el-input
              v-model="ruleForm.level"
              autocomplete="off"
            ></el-input> </el-form-item
          ><br />

          <el-form-item label="单位地区" prop="area">
            <el-input
              v-model="ruleForm.level"
              autocomplete="off"
            ></el-input> </el-form-item
          ><br />

          <el-form-item label="所属行业" prop="industry">
            <el-input
              v-model="ruleForm.industry"
              autocomplete="off"
            ></el-input> </el-form-item
          ><br />

          <el-form-item label="组织机构代码/统一社会信用代码" prop="code">
            <el-input
              v-model="ruleForm.code"
              autocomplete="off"
            ></el-input> </el-form-item
          ><br />

          <el-upload
            class="upload-demo"
            action="http://172.17.7.187:8080/govzc/uploadImage"
            list-type="picture"
          >
            <span class="span2">组织机构代码证或营业执照:</span>
            <el-button type="primary">
              <span class="Upload"> 上传</span>
            </el-button>
            <div slot="tip" class="el-upload__tip span1">
              *可上传*.jpg、*.png、*.gif文件
            </div>
          </el-upload>
          <div id="div1">
            <span class="span2">是否有所属行政主管:</span>
            <el-radio v-model="radio" label="0">是</el-radio>
            <el-radio v-model="radio" label="1">否</el-radio>
          </div>
          <div class="div3">
            <el-form-item label="所属行业主管" prop="supervisor">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="div4">
            <el-form-item label="单位联系人" prop="contact">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="div5">
            <el-form-item label="单位联系电话" prop="companyPhone">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="div6">
            <el-form-item label="单位地址" prop="address">
              <el-input
                v-model="ruleForm.code"
                autocomplete="off"
              ></el-input> </el-form-item
            ><br />
          </div>
        </el-form>
      </div>
      <el-main id="elMain"><h3>管理员信息</h3></el-main>
      <div class="box1">
        <span class="span2">证件类型:</span>
        <el-select class="cerTi" v-model="type" placeholder="身份证">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        ><br />
        <el-form :model="ruleForm" label-width="80px">
          <div class="div7">
            <el-form-item label="证件号码" prop="certificate">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="div8">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="div9">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div class="div10">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="div11">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div class="div12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A" class="agreeM"
          >本人承诺以上所填信息真实准确，如因个人填报信息虚假，本人愿意承担产生的一切责任。</el-checkbox
        ><br />
        <el-checkbox label="复选框 B" class="agreeM"
          >统一遵守用户服务协议。点击查看服务协议
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="div13">
      <el-button class="oReturn" @click="go()">返回首页</el-button>

      <el-button class="oRegister" @click="go1()">提交注册</el-button>
    </div>
  </div>
</template>
<script>
import Header from "../../../components/Header.vue";
export default {
  components: { Header },
  data() {
    let companyName1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("单位名称不能为空"));
      }
    };
    let nature1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("单位性质不能为空"));
      }
    };
    let area1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("单位地区不能为空"));
      }
    };
    let industry1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("所属行业不能为空"));
      }
    };
    let code1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("社会行用代码不能为空"));
      }
    };
    let supervisor1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("所属行业主管不能为空"));
      }
    };
    let contact1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("单位联系人不能为空"));
      }
    };
    let companyPhone1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("单位联系电话不能为空"));
      }
    };
    let address1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("单位地址不能为空"));
      }
    };
    let certificate1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("证件号码不能为空"));
      }
    };
    let password2 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("密码不能为空"));
      }
    };

    return {
      password1: "",
      type: "",
      ruleForm: {
        companyName: "",
        nature: "",
        level: "",
        area: "",
        industry: "",
        code: "",
        supervisor: "",
        contact: "",
        companyPhone: "",
        address: "",

        certificate: "",
        password: "",

        name: "",
        phone: "",
        email: "",
      },
      rules: {
        companyName: [
          { validator: companyName1, trigger: "blur" },
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        nature: [
          { validator: nature1, trigger: "blur" },
          { required: true, message: "请输入单位性质", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        area: [
          { validator: area1, trigger: "blur" },
          { required: true, message: "请输入单位地区", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        industry: [
          { validator: industry1, trigger: "blur" },
          { required: true, message: "请输入所属行业", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        code: [
          { validator: code1, trigger: "blur" },
          { required: true, message: "请输入社会信用代码", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        supervisor: [
          { validator: supervisor1, trigger: "blur" },
          { required: true, message: "请输入所属行业主管", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        contact: [
          { validator: contact1, trigger: "blur" },
          { required: true, message: "请输入单位联系人", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        contcompanyPhonect: [
          { validator: companyPhone1, trigger: "blur" },
          { required: true, message: "请输入单位联系电话", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        address: [
          { validator: address1, trigger: "blur" },
          { required: true, message: "请输入单位地址", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        certificate: [
          { validator: certificate1, trigger: "blur" },
          { required: true, message: "请输入证件号码", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
        password: [
          { validator: password2, trigger: "blur" },
          { required: true, message: "请输入证件号码", trigger: "blur" },
          { pattern: /^\d+$|^\d+[.]?\d+$/, message: "请输入正确的格式" },
        ],
      },

      options: [
        {
          value: "身份证",
          label: "身份证",
        },
        {
          value: "护照",
          label: "护照",
        },
      ],
      value: "",
      checkList: ["复选框 A"],
      radio: "0",
    };
  },
  methods: {
    go() {
      this.$router.push("/home");
    },
    //提交注册
    go1() {
      console.log(this.radio);
      this.$axios({
        url: "/company/registerCompany",
        method: "post",
        data: {
          companyName: this.companyName,
          have: this.radio,
          phone: this.phone,
          certificate: this.certificate,
          nature: this.ruleForm.nature,
          level: this.ruleForm.level,
          area: this.area,
          industry: this.industry,
          supervisor: this.supervisor,
          contact: this.contact,
          companyPhone: this.companyPhone,
          address: this.address,
          type: this.type,
          password: this.password,
          name: this.name,
          email: this.email,
          code: this.code,
        },
      }).then((res) => {
        console.log(res);
      });
    },
  },

  mounted() {
    sessionStorage.setItem("RegisterIndex", "2");
    sessionStorage.setItem("fName", "CompanyRegister");
  },
};
</script>
<style lang="less" scoped>
// /deep/.Upload {
//   width: 96px;
//   height: 34px;
// }
#box {
  /deep/.el-form-item__label {
    margin-left: 400px !important;
  }
  #sp1 {
    border: 1px solid #d7d7d7;
    display: block;
    height: 84px;
    width: 84px;
    border-radius: 84px;
    background: #d7d7d7;
  }
  .box {
    width: 100%;
    height: 100%;
    border: 1px solid aliceblue;

    // text-align: center;
  }

  .el-input {
    width: 220px;
    height: 10px;
    margin-top: 10px;
    margin-right: 450px;
    padding: 10px;
  }

  .span2 {
    font-size: 13px;
    color: #686868;
    float: left;
    margin-left: 300px;
  }
  .el-main {
    color: #686868;
    margin-left: -1000px;
    margin-top: 50px;
    font-family: "Microsoft YaHei";
  }
  .el-upload,
  #div1 {
    // margin-right: 500px;
    // margin-top: 30px;
    text-align: center;
  }
  // .div2 {
  //   margin-left: -165px;
  // }
  // .div3 {
  //   margin-left: -41px;
  // }
  // .div4 {
  //   margin-left: -30px;
  // }
  // .div5 {
  //   margin-left: -43px;
  // }
  // .div6 {
  //   margin-left: -16px;
  // }
  // .div7 {
  //   margin-left: -27px;
  // }
  // .div8 {
  //   margin-left: 10px;
  // }
  // .div9 {
  //   margin-left: -10px;
  // }
  // .div10 {
  //   margin-left: 20px;
  // }
  // .div11 {
  //   margin-left: -16px;
  // }
  // .div12 {
  //   margin-left: -10 px;
  // }
  .div13 {
    text-align: center;
    margin-top: 20px;
    margin-left: -100px;
  }

  #btn1 {
    color: white;
  }
  .agreeM {
    margin-left: 500px;
    margin-top: 30px;
  }

  // .el-tabs__item {
  //   width: 750px;
  // }
}
</style>